<template>
  <el-dialog :append-to-body="true"
             title="上传文件"
             :close-on-click-modal="false"
             @close="closeHandle"
             :visible.sync="visible">
    <el-upload
      v-loading="loading"
      class="upload-demo"
      :action="url"
      :before-upload="beforeUploadHandle"
      :on-success="successHandle"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :on-progress="handleProgress"
      :file-list="fileList"
      list-type="picture"
      style="text-align: center;">
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传zip文件，且不超过50M</div>
    </el-upload>
    <br>
    <el-progress :text-inside="true" :stroke-width="24" :percentage="percentage" status="success"></el-progress>
  </el-dialog>
</template>

<script>

  export default {
    data () {
      return {
        percentage: 0,
        loading: false,
        visible: false,
        url: this.$http.adornUrl(`/theme/theme/uploadAttachment?token=${this.$cookie.get('token')}`),
        num: 0,
        successNum: 0,
        files:{
          'name':'',
          'url':''
        },
        fileList:[],
        returnist:[],
      }
    },
    methods: {
      init () {
        this.fileList = []
        this.visible = true
      },
      // 删除附件
      handleRemove(file, fileList) {
        // console.log(file, fileList);
      },
      // 预览附件
      handlePreview(file) {
        // console.log("handlePreview");
        // console.log(file);
      },
      // 上传之前
      beforeUploadHandle (file) {
        this.loading = true
        //console.log("上传文件类型：" + file.type )
        // if (file.type !== 'application/zip' || file.type !== 'application/x-zip-compressed') {
        //   this.$message.error('只支持zip格式的文件！')
        //   return false
        // }
        this.num++
      },
      handleProgress(event,file,fileList){
        setTimeout(this.handleProgressNum(event),2000);
      },
      handleProgressNum(event){
        setInterval(this.percentage = parseInt((event.loaded / event.total * 100).toFixed(0)),2000)
      },
      //配合 :http-request="handleHttpRequest"
      // handleHttpRequest(data){
      //   let formdata = new FormData()
      //   formdata.append('file', data.file)
      //   const config = {
      //     onUploadProgress: progressEvent => {
      //       // progressEvent.loaded:已上传文件大小
      //       // progressEvent.total:被上传文件的总大小
      //       this.percentage = Number((progressEvent.loaded / progressEvent.total * 100).toFixed(2))
      //     }
      //   }
      //   this.$axios.post(this.url,formdata,config).then(response => {
      //     this.loading = false
      //     if (response && response.code === 0) {
      //       this.$message({
      //         message: "上传成功！",
      //         type: 'success',
      //         duration: 1000,
      //       })
      //       this.files.name = file.name
      //       this.files.url = response.filePath
      //       this.returnist.push(this.files)
      //       this.$emit('refreshDataList',this.returnist)
      //     } else {
      //       this.$message.error(response.msg)
      //     }
      //   })
      // },
      // 上传成功
      successHandle (response, file, fileList) {
        this.fileList = fileList
        this.successNum++
        this.loading = false
        if (response && response.code === 0) {
          this.$message({
            message: "上传成功！",
            type: 'success',
            duration: 1000,
          })
          this.files.name = file.name
          this.files.url = response.filePath
          this.returnist.push(this.files)
          this.$emit('refreshDataList',this.returnist)
        } else {
          this.$message.error(response.msg)
        }
      },
      // 弹窗关闭时
      closeHandle () {
        this.$emit('refreshDataList',this.returnist)
      }
    }
  }
</script>
